<template>
  <view class="kd-income-list-page">
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="handleLoadMore"
      lower-threshold="70"
    >
      <view
        v-if="isNullData"
        class="no-data"
      >
        <van-empty description="暂无数据" />
      </view>

      <view
        v-for="(item, index) in list"
        :key="index"
        class="order-item-wrap mb-20"
        @click="handleToOrderDetail(item.order_info)"
      >
        <view class="order-top-info">
          <view class="time">接单时间{{item.order_info.picked_time}}</view>
          <view class="status">
            +{{item.money}}元
          </view>
        </view>

        <view class="item-content">
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.order_info.a1name}}</view>
                </view>
                <view class="bottom-address">{{ item.order_info.a1areaaddress + item.order_info.a1name_address + item.order_info.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.order_info.a2name}}</view>
                </view>
                <view class="bottom-address">{{ item.order_info.a2areaaddress + item.order_info.a2name_address + item.order_info.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              size="18"
              color="#999"
            ></uni-icons>
          </view>
        </view>
      </view>

      <view
        class="loading"
        v-if="loading"
      >
        <van-loading
          color="#0091FF"
          size="34px"
        />
      </view>

    </scroll-view>
    <van-toast id="van-toast"/>
  </view>
</template>

<script>
  const app = getApp()
  import Toast from '@/wxcomponents/vant/toast/toast';
  export default {

    data() {
      return {
        pageIndex: 1,
        pageSize: 10,
        loading: false,
        hasMoreData: false,
        isNullData: false,
        list: [],
      };
    },

    methods: {
      handleLoadMore() {
        const {
          loading,
          pageIndex,
          hasMoreData
        } = this
        console.log(123123);
        if (loading === false && hasMoreData) {
          this.loading = true
          this.isNullData = false
          this.pageIndex = pageIndex + 1
          this.handleGetRevenueList()
        }
      },

      handleGetRevenueList() {
        const {
          pageIndex,
          pageSize,
        } = this

        this.loading = true
        app.request({
          page: pageIndex,
          limit: pageSize
        }, '/api/logistics/express/assets_log').then((res) => {
          const {
            code,
            data,
            msg
          } = res

          if (code === 1) {
            let getList = data.data || []
            let list = this.list


            const newList = list.concat(getList)
            let hasMoreData = true
            let isNullData = false

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true
            }

            this.hasMoreData = hasMoreData
            this.isNullData = isNullData
            this.list = newList
          } else {
            Toast(msg)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleToOrderDetail(item) {
        const {
          oid
        } = item

        uni.navigateTo({
          url: '/pages/kdOrder/detail?oid=' + oid
        })
      }
    },

    onLoad() {
      this.handleGetRevenueList()
    }

  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
  }

  .kd-income-list-page {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;

    .scroll-content {
      width: 100%;
      height: 100%;
      padding-top: 20rpx;
      .mb-20 {
        margin-bottom: 20rpx;
      }
      .order-item-wrap {
        position: relative;
        width: 100%;
        height: 300rpx;
        background-color: #fff;
        .order-top-info {
          width: 100%;
          height: 84rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 22rpx;
          box-sizing: border-box;
          border-bottom: 1rpx solid #F0F1F6;
          margin-bottom: 22rpx;
          .time {
            color: #999;
            font-size: 24rpx;
          }
          .status {
            font-size: 26rpx;
            color: #FF9600;
          }
        }
        .item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 22rpx;
          box-sizing: border-box;
        }

        .order-status {
          position: absolute;
          right: 30rpx;
          top: 20rpx;
          font-size: 24rpx;
          color: #f0ad4e;
          font-weight: bold;
        }
      }
      .left {
        .mb-20 {
          margin-bottom: 20rpx;
        }
        .send-wrap {
          display: flex;
          align-items: center;
          .icon {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            background-color: #f0ad4e;
            font-size: 22rpx;
          }

          .send-info {
            .top-name {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx;
              .name {
                font-size: 26rpx;
                margin-right: 22rpx;
              }
            }
            .bottom-address {
              color: #999999;
              font-size: 22rpx;
            }
          }
        }

        .receiving-wrap {
          .icon {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            background-color: #157FB9;
            font-size: 22rpx;
          }
        }
      }
    }

  }


  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
